<!--
 * @Author: your name
 * @Date: 2021-12-14 00:23:30
 * @LastEditTime: 2021-12-26 02:23:57
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homeStayMS\src\main\resources\static\vue\MainPage\roomManage\RoomManage.vue
-->
<template>
  <section id="RoomManage">

    <search-bar
      ref="searchBar"
      :search-select.sync="searchSelect"
      :search-form-list="searchFormList"
    >
    </search-bar>

    <section class="button-frame">
      <el-button type="primary" size="mini" @click="openAddFrame(false, '')">
        添加
      </el-button>
    </section>
    <table-frame :table-cols="tableCols" :table-data="tableData">
      <template #operation="scope">
        <el-button
          type="primary"
          size="mini"
          @click="openAddFrame(true, scope.row.rId)"
        >
          编辑
        </el-button>
        <el-button type="primary" size="mini" @click="del(scope.row.rId)">
          删除
        </el-button>

        <el-button
          type="primary"
          size="mini"
          @click="openRuzhuFrame(false, scope.row.rId)"
        >
          入住
        </el-button>

        <el-button type="primary" size="mini" @click="tengkong(scope.row.rId)">
          腾空
        </el-button>
      </template>
    </table-frame>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="getTableList()"
    ></pagination>

    <template>
      <edit
        :dialogVisible.sync="isOpenAddFrame"
        :isEdit="isEditInfo"
        :id="selectedId"
        @updateTableList="getTableList()"
      ></edit>

      <!-- 入住业务弹框 -->
      <ruzhu-frame
        :dialogVisible.sync="isOpenRuzhuFrame"
        :isEdit="isEditInfo"
        :id="selectedId"
      ></ruzhu-frame>
    </template>
  </section>
</template>
<script>
// 在各个列表页中，以下三行import语句直接复制粘贴。其作用是引入公共组件。
import SearchBar from '../../common-components/SearchBar/SearchBar.vue';
import TableFrame from '../../common-components/TableFrame/TableFrame.vue';
import Pagination from '../../common-components/Pagination/Pagination.vue';

// 该语句不要求后端复制粘贴。其作用是导入同文件夹下的弹框组件。
import edit from './Edit.vue';

import ruzhuFrame from './ruzhuFrame.vue';

import api from '../../../js/api/api.js';

export default {
  name: 'RoomManage',

  components: {
    SearchBar,
    TableFrame,
    Pagination,

    edit,
    ruzhuFrame,
  },

  data() {
    return {
      // 打开入住框
      isOpenRuzhuFrame: false,

      isOpenAddFrame: false,
      isEditInfo: false,
      selectedId: 0,
      searchSelect: {
        // houseNumber: '',
        // searchType: 'address',
        // inputContent: '',
        rNum: '',
      },

      /**
       * 搜索组件的配置列表
       * 必须要定义此数组，否则搜索组件无法配制出显示内容
       * 该数组有多少个对象，搜索组件就会显示出多少个内容
       */
      searchFormList: [
        /**
         * prop 必须配置的键名 键值配置想要搜索的字段名 如区域字段 region
         * type 必须配置的键名 如果需要使用输入框 则配置字符串'input'
         * label 必须配置的键名 为搜索栏的名称
         * placeholder 非必要但默认填写的键名 为输入栏的默认提示文本
         */
        {
          prop: 'rNum',
          type: 'input',
          label: '房间号',
          placeholder: '请输入房间号',
        },

        {
          type: 'button',
          name: '搜索',
          btnType: 'primary',
          handle: this.search,
        },

        {
          type: 'button',
          name: '重置',
          handle: this.resetSearchFrame,
        },
      ],

      tableData: [],

      tableCols: [
        {
          prop: 'rNum',
          slotname: 'rNum',
          label: '房间号',
          minWidth: '120',
        },

        {
          prop: 'type',
          slotname: 'type',
          label: '房间类型',
          minWidth: '140',
        },

        {
          prop: 'rPrice',
          slotname: 'rPrice',
          label: '价格',
          minWidth: '120',
        },

        {
          prop: 'status',
          slotname: 'status',
          label: '状态',
          minWidth: '100',
        },

        {
          prop: 'sName',
          slotname: 'sName',
          label: '所属门店',
          minWidth: '140',
        },
        // 表格操作列目前不要求后端模仿配置
        {
          prop: 'operation',
          label: '操作',
          slotname: 'operation',
          fixed: 'right',
          width: '300',
        },
      ],

      /**
       * 来自后端分页查询的数据总数
       * 必须定义 且取名为total 初始值必须为数字格式的0
       * 直接复制粘贴即可
       */
      total: 0,

      pagination: {
        pageSize: 5,
        pageNum: 1,
      },
    };
  },
  methods: {
    // 搜索
    search() {
      const newPagination = { pageSize: 5, pageNum: 1 };
      Object.assign(this.pagination, newPagination);
      this.getTableList(this.searchSelect);
    },

    /** 重置搜索组件筛选项 搜索组件的筛选项表单内容 */
    async resetSearchFrame() {
      this.$refs.searchBar.resetForm();
      await this.getTableList();
    },

    getTableList(filterParam = {}) {
      let addObj = {};
      if (!!this.searchSelect.rNum) {
        addObj = { rNum: this.searchSelect.rNum };
      } else {
        addObj = { id: localStorage.getItem('userId') };
      }

      const getData = {
        ...this.pagination,
        ...filterParam,
        ...addObj,
      };

      /**
       * 请求后端数据 该部分大部分都需要直接复制粘贴，仅有接口函数需要重新根据api的配置来取名。
       * 如： 本页面的分页查询函数是 getStoreList ，则调用api内定义的函数
       */
      api.getRoomList(getData).then((res) => {
        if (res.status === 200) {
          const data = res.data;
          if (data.status) {
            this.tableData = data.result.content;
            this.total = data.result.total;
          }
        }
      });
    },

    tengkong(id){
      api.tengkong({rId: id}).then(() => {
            this.getTableList();
      });
    },

    openAddFrame(isEdit, id) {
      // 打开门店新增与编辑弹框
      this.isOpenAddFrame = true;
      // 更改状态 不属于编辑状态 即新增
      this.isEditInfo = isEdit;
      // 更新被选择的门店id值。
      this.selectedId = id;
    },
    del(id) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          api.deleteRoom({ rId: id }).then(() => {
            this.getTableList();
            this.$message.success('删除成功');
          });
        })
        .catch(() => {});
    },

    /** 打开房间入住框 */
    openRuzhuFrame(isEdit, id) {
      this.isOpenRuzhuFrame = true;
      // 更改状态 不属于编辑状态 即新增
      this.isEditInfo = isEdit;
      // 更新被选择的门店id值。
      this.selectedId = id;
    },
  },

  created() {
    this.getTableList();
  },
};
</script>
<style scoped>
.button-frame {
  margin-bottom: 20px;
}
h3 {
  margin: 10px;
}
</style>
